import { FORM_LAYOUT } from '@/common/constants';
import FormSelectPage, { TAsyncGetListObj } from '@/components/formSelectPage';
// import FormUploadImg from '@/components/formUploadImg';
// import { sendSms } from '@/global/api';
import { queryClassList } from '@/services/assessManage/class/ClassController';
import { queryRoleList } from '@/services/assessManage/role/RoleController';
// import { MailTwoTone } from '@ant-design/icons';
// import { ProFormCaptcha } from '@ant-design/pro-components';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ProFormText } from '@ant-design/pro-form';
// import { message } from 'antd';
import { FC, useEffect } from 'react';

type THosForm = {
  modalFormRef: React.RefObject<ProFormInstance<any>>;
  cItem: any;
};

const AccountForm: FC<THosForm> = (props) => {
  const { modalFormRef, cItem } = props;

  useEffect(() => {
    console.log('看看', cItem);

    modalFormRef?.current?.setFieldsValue(cItem);
  }, [cItem]);

  const asyncGetRoleList = async (obj: TAsyncGetListObj) => {
    const { setPageProps, setOptions, searchVal, pageProps } = obj;
    const { current, pageSize } = pageProps;
    const res = await queryRoleList({
      current,
      pageSize,
      search: searchVal,
    });
    setPageProps({ total: res?.data?.count });
    const newData = res?.data?.rows?.map((item) => {
      return {
        label: item?.role_name,
        value: item?.role_id,
        disabled: item?.role_name === '超级管理员',
      };
    });
    setOptions(newData);
  };

  const asyncGetClassList = async (obj: TAsyncGetListObj) => {
    const { setPageProps, setOptions, searchVal, pageProps } = obj;
    const { current, pageSize } = pageProps;
    const res = await queryClassList({
      current,
      pageSize,
      search: searchVal,
    });
    setPageProps({ total: res?.data?.count });
    const newData = res?.data?.rows?.map((item) => {
      return {
        label: item?.class_name,
        value: item?.class_id,
      };
    });
    setOptions(newData);
  };

  return (
    <ProForm
      formRef={modalFormRef}
      style={{ marginTop: 24 }}
      layout="horizontal"
      submitter={false}
      {...FORM_LAYOUT}
    >
      <ProFormText
        width="md"
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        rules={[{ required: true, message: '请输入姓名' }]}
      />
      {!cItem && (
        <>
          <ProFormText.Password
            width="md"
            label="密码"
            name="password"
            extra="密码至少包含 数字和英文，长度6-20"
            validateFirst={true}
            rules={[
              { required: true, message: '请输入密码!' },
              {
                validator: (rule, value, callback) => {
                  const match = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/g;
                  if (!match.test(value)) {
                    callback('密码至少包含 数字和英文，长度6-20');
                  } else {
                    callback();
                  }
                },
              },
            ]}
          />
          <ProFormText.Password
            width="md"
            label="确认密码"
            name="confirmPassword"
            placeholder="请再次输入密码"
            rules={[
              { required: true, message: '请输入确认密码密码!' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入密码不一致!'));
                },
              }),
            ]}
          />
        </>
      )}
      <ProFormText
        width="md"
        name="js_number"
        label="学号/工号"
        placeholder="请输入学号/工号"
        fieldProps={{
          maxLength: 12,
        }}
        rules={[
          { required: true, message: '请输入手机号!' },
          // {
          //   validator: (rule, value, callback) => {
          //     const match =
          //       /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/g;
          //     if (!match.test(value)) {
          //       callback('请输入正确的手机号');
          //     } else {
          //       callback();
          //     }
          //   },
          // },
        ]}
      />
      {/* <FormUploadImg
        required
        uploadProps={{ maxCount: 1 }}
        formItemProps={{ name: 'avatar', label: '头像' }}
      /> */}
      <FormSelectPage
        proFormSelectProps={
          {
            name: 'role',
            label: '绑定角色',
            rules: [{ required: true, message: '请选择' }],
            placeholder: '请选择角色',
          } as any
        }
        asyncGetList={asyncGetRoleList}
      />
      <FormSelectPage
        proFormSelectProps={
          {
            name: 'class',
            label: '绑定班级',
            rules: [{ required: true, message: '请选择' }],
            placeholder: '请选择班级',
          } as any
        }
        asyncGetList={asyncGetClassList}
      />
    </ProForm>
  );
};

export default AccountForm;
